<template>
  <div>
    <header>面试信息</header>
    <section class="content">
      <form @submit="submit" report-submit>
        <p>
          <span>公司名称</span>
          <input type="text" placeholder="请输入公司名称" v-model="current.company" />
        </p>
        <p>
          <span>公司电话</span>
          <input type="text" placeholder="请输入面试联系人电话" v-model="current.phone" />
        </p>
        <p>
          <span>面试时间</span>
          <picker
            mode="multiSelector"
            @change="MultiPickerChange"
            @columnchange="MultiPickerColumnChange"
            :value="multiIndex"
            :range="multiArray"
          >
            <view class="picker">{{dateShow}}</view>
          </picker>
        </p>
        <p>
          <span>面试地址</span>
          <input
            type="text"
            @tap="goSearch"
            disabled
            placeholder="请输入面试地址"
            v-model="current.address"
          />
        </p>

        <h3>备注信息</h3>
        <section class="textareaWrap">
          <textarea placeholder="备选信息(可选，100个字以内)" v-model="current.description"></textarea>
        </section>
        <footer>
          <button :class="{active:btnEnable}" form-type="submit">确认</button>
        </footer>
      </form>
    </section>
  </div>
</template>

<script>
import moment from "moment";
import { sign } from "../../api/interview";

const range = [
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
  [
    0,
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20,
    21,
    22,
    23
  ],
  ["00分", "10分", "20分", "30分", "40分", "50分"]
];

export default {
  data() {
    return {
      multiIndex: [0, 0, 0],
      current: {
        company:'',
        phone:'',
        address:'',
        description:''
      },
      submiting:false
    };
  },

  onShow() {
    let obj = { ...this.current };
    obj.address = wx.getStorageSync("address")
      ? wx.getStorageSync("address")
      : "";
    this.current = obj;
  },

  created() {
    //23点以后，从第二天开始
    if (moment().hours() > 23) {
      this.multiIndex = [1, 0, 0];
    }
  },

  computed: {
    
    btnEnable() {
   
      if (!this.current.company) {
        return false;
      }
      if (!/^1[3-9]\d{9}$/.test(this.current.phone)) {
        return false;
      }
    
      if (!this.current.address) {
        return false;
      }

      if (!this.current.description) {
        return false;
      }

      return true;
    },
    dateShow() {
      return moment()
        .add(
          moment().hours() === 23 ? this.multiIndex[0] - 1 : this.multiIndex[0],
          "days"
        )
        .add(this.multiIndex[1] + 1, "hours")
        .minute(this.multiIndex[2] * 10)
        .format("YYYY-MM-DD HH:mm");
    },
    multiArray() {
      let dateRang = [...range];
      //过滤之前的时间
      if (!this.multiIndex[0]) {
        //今天过滤
        dateRang[1] = dateRang[1].filter(item => {
          return item > moment().hours();
        });
      }
      // console.log(dateRang[1],222)
      //小时
      dateRang[1] = dateRang[1].map(item => {
        return item + "点";
      });
      //号
      dateRang[0] = dateRang[0].map(item => {
        return (
          moment()
            .add(item, "days")
            .date() + "号"
        );
      });
      return dateRang;
    }
  },
  methods: {
    async submit(e) {

       if (this.submiting){
        return false;
      }
      // 判断公司名称是否为空
      if (!this.current.company){
        wx.showToast({
          title: '请输入公司名称', //提示的内容,
          icon: 'none', //图标,
        });
        return false;
      }
      // 判断手机号是否符合规范
      if (!/^1(3|4|5|7|8)\d{9}$/.test(this.current.phone) || !/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(this.current.phone)){
        wx.showToast({
          title: '请输入面试联系人的手机或座机', //提示的内容,
          icon: 'none', //图标,
        });
        return false;
      }
      // 判断公司地址
      if (!this.current.address.address){
        wx.showToast({
          title: '请选择公司地址', //提示的内容,
          icon: 'none', //图标,
        });
        return false;
      }

      let _this = this;
      wx.getLocation({
        type: "wgs84",
        success(res) {
          _this.current.latitude = res.latitude;
          _this.current.longitude = res.longitude;
        }
      });
      this.current.start_time = +new Date(this.dateShow);
      this.current.form_id = e.target.form_id;
 
      const result = await sign(this.current);
 

      console.log(result, "result");
    },
    MultiPickerChange() {},
    MultiPickerColumnChange(e) {
      const { column, value } = e.target;
      let Index = [...this.multiIndex];
      Index[column] = value;
      this.multiIndex = Index;
    },
    goSearch() {
      wx.navigateTo({
        url: "/pages/search/index"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
header,
h3 {
  height: 80rpx;
  line-height: 80rpx;
  font-size: 38rpx;
  font-weight: 600;
  background: #eee;
  padding: 0 20rpx;
}
.content {
  padding: 0 30rpx;
  p {
    height: 90rpx;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: gray;
    span {
      width: 170rpx;
      text-align: center;
    }
    input {
      flex: 7.5;
      color: #999;
    }
  }
}
.textareaWrap {
  padding: 30rpx;
  textarea {
    width: 100%;
    height: 220rpx;
    border: 1px solid #ccc;
    font-size: 30rpx;
    color: #999;
    padding: 10rpx;
    box-sizing: border-box;
  }
}
footer {
  margin-top: 20rpx;
  button {
    height: 90rpx;
    line-height: 90rpx;
    font-size: 36rpx;
    color: #fff;
    border-radius: 0;
    border: none;
    background: #999999;
    &.active {
      background: #197dbf;
    }
  }
}
</style>